import { createElement, HTMLAttributes, type FC } from 'react';
import classNames from 'classnames';
import { tableHeaderDefaultProps } from './defaultProps';
import type { TableHeaderOptions } from './type';

export interface TableHeaderProps extends TableHeaderOptions, HTMLAttributes<HTMLTableSectionElement> {}

const TableHeader: FC<TableHeaderProps> = (props) => {
  const { className, as, fullWidth, children, forwardedRef, ...tableHeaderProps } = props;

  return createElement(
    as!,
    { ref: forwardedRef, className: classNames({ 'full-width': fullWidth }, className), ...tableHeaderProps },
    children,
  );
};

TableHeader.displayName = 'TableHeader';
TableHeader.defaultProps = tableHeaderDefaultProps;

export default TableHeader;
